<template lang='pug'>
  section.detail
    header
      van-nav-bar(
        title="商品详情"
        left-arrow
        @click-left="$router.back()"
        )
      vanswipe(:images="images")
    .commodity-overview
      .title {{commodity.name}}
      .desc {{commodity.subtitle}}
      .amount ¥{{commodity.price}}
        .sell 累计销售{{commodity.soldStock || 0}}件
      //- .other
        //- .express 快递：免邮
        
        //- .address 发货地：西藏
    .commodity-detail
      .split
      .commodity-detail-main
        .commodity-detail-key.border-1px(v-for="key in keys") {{key.key}}：&nbsp;&nbsp;&nbsp;&nbsp;{{key.value}}
      .split
      .commodity-detail-detail(v-html="commodity.detail")
      
    van-goods-action
      //- van-goods-action-mini-btn(icon="chat" text="客服" @click="buy")
      van-goods-action-mini-btn(icon="cart" text="购物车" @click="$router.push('/shoppingCart')")
      van-goods-action-big-btn(text="加入购物车" @click="skuShow = true; isCart = true")
      van-goods-action-big-btn(text="立即购买" @click="skuShow = true; isCart = false" primary)
    
    vantsku(v-model="skuShow" @buy="buy" @num="getNum" :url="commodity.mainImage + '?imageView2/1/w/200/h/200'" :stock="commodity.stock"  :title="commodity.name" :price="commodity.price")


</template>

<script type='text/ecmascript-6'>
  import vanswipe from '~/components/vanswipe'
  import vantsku from '~/components/vansku'
  import { saveorder } from '~/assets/js/order'

  export default {
    // transition: 'slider',
    head() {
      return {
        title: this.commodity.name
      }
    },
    components: {
      vanswipe,
      vantsku
    },
    async asyncData(ctx) {
      const id = ctx.route.params.id
      const resp = await ctx.$post('/api/platform/product/findProduct', {id})
      console.log('commodity', resp.data)
      return { commodity: resp.data || {}, id }
    },
    data () {
      return {
        isCart: false,
        skuShow: false,
        im: [
          'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg',
          'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
          'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg'
        ],
        quantity: 1
      }
    },
    computed: {
      images() {
        if (!this.commodity) {
          return []
        } else if (this.commodity.subImages) {
          const _list = JSON.parse(this.commodity.subImages).list || []
          return _list.length ? _list : [this.commodity.mainImage]
        } else {
          return [this.commodity.mainImage]
        }
      },
      keys() {
        return JSON.parse(this.commodity.detailField1 || '{}')
      },
      user() { return this.$store.state.authUser || {} },
      userId() {
        if (!this.user ||!this.user.user) return ''
        return this.user.user.id
      },
    },
    beforeMount() {
      let config = {
        title: this.commodity.name,
        desc: this.commodity.subtitle,
        imgUrl: this.commodity.mainImage
      }
      this.wxShare(config, this.userId)
      console.log('images', this.images)
    },
    methods: {
      getNum(num) {
        this.quantity = num
      },
      buy() {
        this.skuShow = false
        if (this.isCart) {
          this.addCart()
          return
        }
        
        const { name: productName, price: currentUnitPrice, mainImage: productImage, subtitle: title } = this.commodity || {}
        const order = {
          productId: this.id,
          productName, // 商品名 
          title,
          currentUnitPrice, // 生成订单时的商品单价，单位是元,保留两位小数
          userId: this.userId,
          quantity: this.quantity, // 商品数量
          productImage,
          totalPrice: this.quantity * currentUnitPrice, // 商品总价
        }
        saveorder([order])

        this.$router.push('/buy')
      },
      async addCart() {
        const resp = await this.$post('/api/platform/cart/add', {  userId: this.userId, productId: this.id, quantity: this.quantity })
        console.log('resp', resp)
        if (resp.msg === 'ok') this.$toast('成功加入购物车')
      },
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import "~assets/stylus/variable.styl"
@import "~assets/stylus/mixin.styl"

.detail
  padding-bottom 5rem
  .commodity-overview
    padding 1.8rem 1rem 1rem
    line-height 2
    .amount
      display flex
      font-size $fsz-large
      align-items center
      .sell
        flex 1
        text-align right
        color $color-black-l
        font-size $fsz-small
    .desc, .other
      color $color-black-l
    .other
      display flex
      justify-content space-between
  .commodity-detail
    &-main
      padding .5rem 1rem
      line-height 2.3
      color $color-black-l
    &-key
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      &:not(:last-child)
        border-1px($color-border-l)
    &-detail
      padding 1rem 1rem 0
      line-height 2
      img
        max-width 100%
        height auto
        vertical-align top
</style>
